<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="./css/zui.css">
    <link rel="stylesheet" href="./css/nav.css">
</head>

<body>
    <div class="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <!-- 导航头部 -->
                <div class="navbar-header">
                    <!-- 移动设备上的导航切换按钮 -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target=".navbar-collapse-example">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- 品牌名称或logo -->
                    <a class="navbar-brand" href="/">北游前端论坛</a>
                </div>
                <!-- 导航项目 -->
                <div class="collapse navbar-collapse navbar-collapse-example">
                    <ul class="nav navbar-nav navbar-right">
                        <!-- <li><a href=""><i class="icon icon-plus"></i> 发表</a></li> -->
                        <li><a href="./login.html"><i class="icon icon-user"></i> 登录</a></li>
                        <!-- <li class="dropdown">
                      <a href="" class="dropdown-toggle" data-toggle="dropdown">探索 <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="">敏捷开发</a></li>
                        <li><a href="">HTML5</a></li>
                        <li><a href="">Javascript</a></li>
                        <li class="divider"></li>
                        <li><a href="">探索宇宙</a></li>
                      </ul>
                    </li> -->
                    </ul>
                </div>
        </nav>
    </div>
    <main>
        <div class="form-group">
            <label for="exampleInputAccount1">账号</label>
            <input type="text" class="form-control" id="username" placeholder="电子邮件/手机号/用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputAccount1">密码</label>
            <input type="password" class="form-control" id="password" placeholder="请输入用户密码">
        </div>
        <div class="form-group">
            <label for="exampleInputAccount1">确认密码</label>
            <input type="password" class="form-control" id="aginpassword" placeholder="请你在次输入密码">
        </div>
        <button class="btn btn-block btn-success" type="button">注册</button>
    </main>
</body>
<script src="./js/jquery.js"></script>
<script src="./js/zui.js"></script>
<script>
    // 封装ajax
    function sendAjax(url,data){
        return new Promise((resolve,reject)=>{
            $.ajax({
                url:url,
                method:data?"post":"get",
                data:data,
                success(res){
                    resolve(res)
                }
            })
        })
    }
    $(".btn-success").click(function () {
        let username = $("#username").val();
        let password = $("#password").val();
        let aginpassword = $("#aginpassword").val();
        // 判断用户是否输入完整内容
        if (!username || !password || !aginpassword) {
            new $.zui.Messager('请您先补充完整信息', {
               type:"warning",
               icon: 'warning-sign',
               time:1000
            }).show();
            return
        }
        // 判断密码是否一致
        if(password != aginpassword){
            new $.zui.Messager('两次密码输入不一致', {
               type:"warning",
               icon: 'warning-sign',
               time:1000
            }).show(); 
            return
        }
        if(password.length<6){
            new $.zui.Messager('密码长度最少为6位', {
               type:"warning",
               icon: 'warning-sign',
               time:1000
            }).show(); 
            return
        }
        let data = {
            username,
            password
        }
        sendAjax("/regiest",data).then(res=>{
            console.log(res)
            if(res.code == 0){
                window.location.href = './login.html'
            }else{
                new $.zui.Messager(res.msg, {
               type:"warning",
               icon: 'warning-sign',
               time:2000
            }).show(); 
            }
        })
    })

</script>

</html>